/*
  学习目标：生命周期-更新阶段
  触发更新阶段的两个方式:
    1. 💥setState
    2. 💥props的值改变

  钩子函数
    1. render
    2. componentDidUpdate : 💥做缓存

  注意:
    1. 更新阶段的任何钩子函数中, 不允许调用setState

*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    money: 1000,
  };

  // 渲染
  render() {
    const { money } = this.state;
    return (
      <div>
        <button
          onClick={() => {
            this.setState({ money: money + 1 });
          }}
        >
          点我
        </button>
        <Child></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    return <h1>Child -</h1>;
  }

  // 快捷键:cdup
  // 对标: vue中的updated
  // 场景: 做缓存
  componentDidUpdate() {
    console.log('componentDidUpdate  ----->  ');
  }
}
